<script setup lang="ts">
import { onMounted, reactive, computed, ref } from "vue";
import moment from "moment";
import ArchiveItem from "./components/ArchiveItem.vue";
import { getArticleList } from "@/api/article.js";
const archiveObj = reactive({});
let total = ref();
onMounted(() => {
  getList();
});

const archKeys = computed(() => {
  return Object.keys(archiveObj);
});

const getList = async () => {
  const res = await getArticleList({ page: 1, size: 30 });
  console.log(res, "da");
  let data = res.data;
  total.value = res.total;
  data.sort((a, b) => {
    return parseInt(b.createTime) - parseInt(a.createTime);
  });
  data.forEach((item) => {
    let str = formatYMtime(item.createTime);
    if (!archiveObj[str]) {
      archiveObj[str] = [];
    }
    archiveObj[str].push(item);
  });
  console.log(archiveObj, "arch");
};

const formatYMtime = (time) => {
  return moment(parseInt(time)).format("YYYY 年 MM 月");
};
</script>

<template>
  <el-card class="archive-card">
    <template v-slot:header> 目前共计{{ total }}篇文章，继续加油 </template>
    <div class="content">
      <ArchiveItem
        v-for="(key, index) in archKeys"
        :key="index"
        :list="archiveObj[key]"
        :title="key"
      />
    </div>
  </el-card>
</template>

<style scoped lang="scss">
:deep .el-card__body {
  padding: 5px;
}
.archive-card {
  margin: 0 auto;
  margin-top: 20px;
  width: 70%;
  :deep .el-card__header {
    text-align: center;
    color: $strong;
    font-weight: bold;
  }
  .content {
    margin-top: 20px;
  }
}

@media screen and (max-width: 1000px){
    .archive-card {
        width:100%;
        padding:0 10px;
    }
}
</style>
